<template>
  <div>
    <!-- banner -->
    <div class="banner" :style="cover" />

    <el-row class="home-container" >
      <el-col :span="24">
        <v-card shadow="hover" style="margin-left: 10px;">
          <div >
            <div style="padding: 20px 10px;">
              <div style="display: flex">
                <div>
                  <span style="color: #735c0f;font-size: 25px;" >{{ userFavoritesInfo.favoritesName }}</span>
                    <span class="span1" v-if="userFavoritesInfo.visible === 1">
                    <font style="color: #735c0f;">仅自己可见</font>
                  </span>
                  <span class="span1" v-else>
                    <font style="color: #735c0f;">所有人可见</font>
                  </span>
                </div>
                <div style="margin-left: auto;" >
                  <el-button icon="el-icon-setting"
                             v-if="showEdit"
                             @click="editFavorites"
                             style="margin-left: auto" size="small" type="info">编辑</el-button>
                </div>
              </div>

              <div style="margin-top: 20px;width: 80%">
                <span :title="userFavoritesInfo.description"
                      style="color: #1abc9c;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                  {{ userFavoritesInfo.description }}
                </span>
              </div>
              <div style="margin-top: 20px;">
                <router-link :to="'/user/' + userFavoritesInfo.userId" tag="a" target="_blank">
                  <span style="color: #f24f2d">{{ userFavoritesInfo.userName }}</span> 创建于
                </router-link>
                <span style="color: #6a737d;font-size: 15px;" >
                  创建于 <span style="color: #7bc549">{{ handleCreateTime(userFavoritesInfo.createTime) }}</span>
                </span>
              </div>

            </div>

          </div>


        </v-card>

        <v-card v-if="userFavoritesArticleList.length === 0"
                shadow="hover"
                style="margin-left: 10px;margin-top: 10px;">
          <el-empty description="暂无数据"></el-empty>
        </v-card>

        <v-card v-if="userFavoritesArticleList.length > 0"
                shadow="hover"
                style="margin-left: 10px;margin-top: 10px;">
          <div style="padding: 20px;">
            <v-row>
              <v-col md="3" cols="12" v-for="(item, index) of userFavoritesArticleList" :key="item.articleId">
                <!-- 文章 -->
                <v-card class="animated zoomIn article-item-card">
                  <div class="article-item-cover">
                    <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
                      <!-- 缩略图 -->
                      <v-img class="on-hover" width="100%" height="100%" :src="item.articleCover" />
                    </router-link>
                  </div>
                  <div class="article-item-info" style="padding: 10px;">
                    <div style="width: 80%">
                      <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
                        <span :title="item.articleTitle"
                              style="color: #7bc549;white-space: nowrap;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                          {{ item.articleTitle }}
                        </span>
                      </router-link>
                    </div>
                  </div>
                </v-card>
              </v-col>
            </v-row>

            <!--    分页        -->
            <v-pagination color="#00C4B6"
                          v-model="current"
                          :length="Math.ceil(favoritesArticleParam.total / favoritesArticleParam.pageSize)"
                          total-visible="7"
                          style="margin-top: 20px;"/>
          </div>
        </v-card>

      </el-col>

      <el-dialog
          title="编辑"
          :visible.sync="dialogVisible"
          width="30%">
        <el-form label-position="right"
                 label-width="100px"
                 :model="userFavoritesInfo"
                 :rules="editFavoritesRule"
                 ref="editFavoritesRule">
          <el-form-item label="收藏夹名称" prop="favoritesName" >
            <el-input :disabled="userFavoritesInfo.favoritesName === '默认收藏夹'"
                      v-model="userFavoritesInfo.favoritesName" clearable show-word-limit maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="userFavoritesInfo.description" clearable show-word-limit maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="可见范围" prop="visible">
            <el-radio-group v-model="userFavoritesInfo.visible" >
              <el-radio border :label = 1>仅自己可见</el-radio>
              <el-radio border :label = 2>所有人可见</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small"
                       :loading="loading"
                       @click="submit('editFavoritesRule')">提交</el-button>
            <el-button @click="handleClose('editFavoritesRule')" size="small">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-row>



  </div>
</template>

<script>
import userFavoritesApi from '../../api/userFavorites';
import { getUserId } from '../../utils/cookieUtil';

export default {
  data() {
    return  {
      loading: false,
      dialogVisible: false,
      userId: '',
      current: 1,
      userFavoritesInfo: {},
      showEdit: false,
      userFavoritesArticleList: [],
      favoritesArticleParam: {
        pageNo: 1,
        pageSize: 8,
        favoritesId: this.$route.params.favoritesId,
        total: 0
      },
      editFavoritesRule: {
        favoritesName: [
          { required: true, message: '请输入收藏夹名称', trigger: 'blur'  }
        ],
        visible: [
          { required: true, message: '请选择可见范围', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入收藏夹描述', trigger: 'blur'  }
        ]
      }
    }
  },

  methods: {
    // 获取收藏夹的文章信息
    fetchFavoritesArticle() {
      this.favoritesArticleParam.pageNo = this.current;
      userFavoritesApi.favoritesArticlePageList(this.favoritesArticleParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userFavoritesArticleList = data.list;
          this.favoritesArticleParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取收藏夹信息
    fetchFavoritesInfo() {
      userFavoritesApi.getFavoritesInfo(this.$route.params.favoritesId).then(res => {
        const { code, data } = res;
        if (code === 200) {
          this.userFavoritesInfo = data;
          this.showEdit = data.userId === getUserId();
        } else {
          this.$router.push("/404");
        }
      })
    },

    handleCreateTime(val) {
      if (!val) {
        return '';
      }
      return val.substr(0, 10);
    },

    // 编辑收藏夹信息
    editFavorites() {
      this.dialogVisible = true;
    },

    handleClose(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
      this.loading = false;
    },

    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          userFavoritesApi.updateFavorites(this.userFavoritesInfo).then(res => {
            const { code, message } = res;
            if (code === 200) {
              this.$message.success('编辑成功');
              this.dialogVisible = false;
              this.fetchFavoritesInfo();
            } else {
              this.$message.error(message);
            }
            this.loading = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

  },

  computed: {
    cover() {
      return "background: url("
          + 'https://blog4j.oss-cn-shanghai.aliyuncs.com/article_img/20240811/6da67ab078.jpg' + ") center center / cover no-repeat";
    }
  },

  created() {
    this.userId = getUserId();
    this.fetchFavoritesInfo();
    this.fetchFavoritesArticle();
  },

  watch: {
    current(val) {
      this.current = val;
      this.fetchFavoritesArticle();
    },
  }
}


</script>

<style>
.home-container {
  max-width: 1000px;
  margin: 350px auto 28px auto;
  padding: 0 5px;
}

.span1 {
  font-size:12px;
  border-radius:3px;
  border: 1px solid  #f70;
  text-align: center;
  margin-left: 8px;
}

.article-item-card {
  border-radius: 8px !important;
  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
}
.article-item-card a {
  transition: all 0.3s;
}
.article-item-cover {
  height: 220px;
  overflow: hidden;
}
.article-item-card a:hover {
  color: #8e8cd8;
}
.tag-wrapper a {
  color: #fff !important;
}
</style>